// JavaScript Document
(function ($) {
    $.fn.extend({
        MultDropList: function (options) {
            var op = $.extend({ wraperClass: "wraper", width: "150px", height: "200px", data: "", selected: "" }, options);
            return this.each(function () {
                var $this = $(this); //select
                var width = $this.width();
                if (width < 100)
                    width = 100;
                var $thisold = $(this); //select
                $this.hide(); //隐藏原select
                var selData = $(this).children('option'); //获取所有select的数值
                var muid = $this.attr('id') + "_muselect";
                $this.after("<input readonly style='border:none' type='text' id='" + muid + "' />");
                $this = $("#" + muid);
                $this.css('width', width);
                var conSelector = "#" + $this.attr("id");
                var $wraper = $(conSelector).wrapAll("<div><div></div></div>").parent().parent().addClass(op.wraperClass);
 
                var $list = $('<div class="list"></div>').appendTo($wraper);
 
                $list.css({ "width": width });
                //控制弹出页面的显示与隐藏
                $this.click(function (e) {
                    //$(".list").hide();
                    $list.toggle();
                    e.stopPropagation();
                });
                $this.css('cursor', 'pointer');
 
                $(document).click(function () {
                    $list.hide();
                });
 
                $list.filter("*").click(function (e) {
                    e.stopPropagation();
                });
                //加载默认数据
                $list.append('<ul><li><input type="checkbox" class="selectAll" value="" /><span> 全部</span></li></ul>');
                var $ul = $list.find("ul");
 
 
                selData.each(function () {
                    $ul.append('<li><input type="checkbox" value="' + $(this).attr('value') + '" /><span> ' + $(this).text() + '</span></li>');
                });
 
                //加载勾选项
                var seledArr;
                if (op.selected.length > 0) {
                    seledArr = op.selected.split("&");
 
                    $.each(seledArr, function (index) {
                        $thisold.children("option[value='" + seledArr[index] + "']").attr('selected', true);
                        $("li input[value='" + seledArr[index] + "']", $ul).attr("checked", "checked");
                        var vArr = new Array();
                        $("input[class!='selectAll']:checked", $ul).each(function (index) {
                            vArr[index] = $(this).next().text();
                        });
                        $this.val(vArr.join(","));
                    });
                }
                //全部选择或全不选
                $("li:first input", $ul).click(function () {
                    if ($(this).attr("checked")) {
                        $("li input", $ul).attr("checked", "checked");
                    }
                    else {
                        $("li input", $ul).removeAttr("checked");
                    }
                });
                //点击其它复选框时，更新隐藏控件值,文本框的值
                $("input", $ul).click(function (event) {
                    window.event.cancelBubble = true
                    var kArr = new Array();
                    var vArr = new Array();
                    $("input[class!='selectAll']:checked", $ul).each(function (index) {
                        kArr[index] = $(this).val();
                        vArr[index] = $(this).next().text();
                    });
                    $thisold.children("option").removeAttr('selected');
                    for (i = 0; i < kArr.length; i++) {
                        $thisold.children("option[value='" + kArr[i] + "']").attr('selected', true);
                    }
                    $this.val(vArr.join(","));
                });
 
                //点击li的时候选择
                $("li", $ul).click(function () {
                    $(this).children().get(0).click();
                    return;
                });
            });
        }
    });
})(jQuery);